<template>
	<!-- #ifdef MP-WEIXIN -->
	<uv-navbar
	  :fixed="false"
	  :title="title"
	  left-arrow
	  @leftClick="$onClickLeft"
	/>
	<!-- #endif -->
	<view class="p-3">
		<view class="" v-if="list.length > 0">
			<view class="card" style="backgroundColor:#6C80FF" v-for="(item,i) in list" :key="i" >
				<view class="flex content-center justify-between">
					<view class="left">
						<view class="top">
							{{item.bankName}}
						</view>
						<view class="bom">
							银行卡
						</view>
					</view>
					<view class="right" @click="del(item.id)">
						解绑
					</view>
				</view>
				<view class="num">
					{{item.bankCode}}
				</view>
			</view>
		</view>
		<view class="" v-else>
			<uv-empty mode="list"></uv-empty>
		</view>


		<view class="addcard flex content-center" @click="gopage('/pages/components/pages/merchant/addCard')">
			<view class="text">
				添加账号
			</view>
		</view>
	</view>


</template>

<script setup>
import {
  ref
} from 'vue'
import {
	getCards,
	deleteCard
} from '@/api/merchant'
import { onLoad} from '@dcloudio/uni-app'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { lastfour } from '@/utils/util'
const main = useMainStore()
const { merchartShop } = storeToRefs(main)
const title = ref('提现')
const list = ref([])

onLoad(() => {
	getList()
})

const getList  = async() => {
	let res = await getCards({shopId:merchartShop.value.id})
	if(res){
		list.value = res
	}
}

const del = async(id) => {
	uni.showModal({
		title: '提示',
		content: '确定要解绑？',
		success: async function (res) {
			if (res.confirm) {
				let res1 =  await deleteCard({id:id})
				if(res1){
					getList()
				}
			} else if (res.cancel) {
			}
		}
	});
}

const gopage = (url) =>{
	uni.navigateTo({
		url
	})

}

</script>

<style lang="scss">
	.addcard {
		width: 700rpx;
		height: 100rpx;
		background: #09b4f1;
		border-radius: 20rpx;
		padding: 30rpx 0rpx 44rpx 250rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 40rpx;
		text-align: center;
		z-index: 999;

		.text {
			font-size: 28rpx;
			color: #ffffff;
			margin-left: 16rpx;
		}
	}

	.card {
		margin-bottom: 20rpx;
		width: 700rpx;
		height: 258rpx;
		border-radius: 20rpx;
		padding: 40rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 9;

		.num {
			font-size: 46rpx;
			color: #FFFFFF;
			margin-top: 20rpx;
		}

		.left {
			.top {
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
			}

			.bom {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.7);
			}
		}

		.right {
			font-size: 28rpx;
			width: 125rpx;
			height: 50rpx;
			background-color: rgba(255, 255, 255, 0.5);
			border-radius: 25rpx;
			text-align: center;
			line-height: 50rpx;
			color: #FFFFFF;
			z-index: 9;
		}
	}
</style>
